<mat-expansion-panel class="margin-expansion-panel" [hideToggle]="true" (opened)="isPanelOpen = true" (closed)="isPanelOpen = false">
  <!-- Objective Header -->
  <mat-expansion-panel-header [collapsedHeight]="'100%'" [expandedHeight]="'100%'" class="no-padding">
    <div class="header-padding flex-nowrap objective f-1" [ngClass]="{'objective-inactive': !objective.isActive}">
      <!-- Drag handle by parediv contained here -->
      <ng-content></ng-content>

      <div class="icon-spacer objective-title objective-lineNumber">{{ listNumber }} .</div>

      <div class="flex-wrap-spreadinner f-1">
        <div class="objective-title objective-title-flex">
          {{ objective.name }}
        </div>

        <!-- Progress bar if objective is active and has keyResults -->
        <div *ngIf="objective.isActive && objective.keyResultIdList.length > 0" class="objective-progressBar">
          <!-- Progress bar if KeyResults have been loaded in-->
          <div *ngIf="isProgressValueSetForObjective(); else progressNotSet" class="flex-nowrap-center progress-bar">
            <div [ngSwitch]="currentObjectiveScore.toString()" class="flex-nowrap-center f-1 hidden-m-down">
              <div *ngSwitchCase="2" class="circle off-track">
                <mat-icon matTooltip="{{ 'objective.tooltip.bad-progress' | translate }}">trending_down</mat-icon>
              </div>
              <div *ngSwitchCase="1" class="circle in-danger">
                <mat-icon matTooltip="{{ 'objective.tooltip.progress-can-be-better' | translate }}">trending_flat</mat-icon>
              </div>
              <div *ngSwitchDefault class="circle on-track">
                <mat-icon matTooltip="{{ 'objective.tooltip.good-progress' | translate }}">trending_up</mat-icon>
              </div>
            </div>
            <mat-progress-bar class="f-5 h-6 hidden-m-down" mode="determinate" [value]="getProgressValueForObjective()" color="accent">
            </mat-progress-bar>
            <div class="text-center f-15">{{getProgressValueForObjective()}} %</div>
          </div>
          <!-- Progress bar if KeyResults haven't loaded in yet-->
          <ng-template #progressNotSet>
            <div class="flex-nowrap progress-bar">
              <div class="f-1"></div>
              <mat-progress-bar class="progress-bar f-5 h-6" mode="indeterminate" color="accent">
              </mat-progress-bar>
              <div class="f-15"></div>
            </div>
          </ng-template>
        </div>

        <!-- Flavor text when objective is inactive, displayed instead of progress bar-->
        <div *ngIf="!objective.isActive" class="flex-nowrap-center objective-progressBar">
          <mat-icon>info</mat-icon>
          <span>{{ 'objective.objective-isnt-active' | translate }}</span>
        </div>
      </div>

      <div class="icon-spacer-large f-05" *ngIf="hasSubObjectives()" matTooltip="{{ 'objective.tooltip.subordinate.' | translate }}">
        <button class="icon-spacer" (click)="$event.stopPropagation()" [matMenuTriggerFor]="childMenu" [matMenuTriggerData]="{ objective: objective }" mat-icon-button>
          {{ objective.subObjectivesCount }}
          <mat-icon>assignment</mat-icon>
        </button>
      </div>

      <button class="icon-spacer" *ngIf="!cycle.isCycleClosed()" (click)="$event.stopPropagation()" [matMenuTriggerFor]="optionsMenu" [matMenuTriggerData]="{ objective: objective }" matTooltip="Mehr Optionen zu diesem Objective" mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>

      <button class="icon-spacer" mat-icon-button matTooltip="{{ 'objective.tooltip.expand-objective' | translate }}">
        <mat-icon *ngIf="!isPanelOpen">expand_more</mat-icon>
        <mat-icon *ngIf="isPanelOpen">expand_less</mat-icon>
      </button>
    </div>
  </mat-expansion-panel-header>
  <!-- Objective Contents -->
  <app-objective-contents #contentsComponent [objective]="objective" [currentUserRole]="currentUserRole" [cycle]="cycle" (objectiveProgressChanged)="updateObjectiveProgress($event)">
  </app-objective-contents>

</mat-expansion-panel>

<!-- Options menu -->
<mat-menu #optionsMenu="matMenu" xPosition="before">
  <ng-template matMenuContent let-objective="objective">
    <button mat-menu-item *ngIf="userIsOkrMember()" (click)="clickedEditObjective()">
      <mat-icon>edit</mat-icon>
      <span>{{ 'objective.menu.edit-objective' | translate }}</span>
    </button>
    <button mat-menu-item (click)="clickedCommentObjective()">
      <mat-icon>chat</mat-icon>
      <span>{{ 'objective.menu.comment-objective' | translate }}</span>
    </button>
    <button mat-menu-item *ngIf="userIsOkrMember()" (click)="toggleWhetherObjectiveIsActive()">
      <div *ngIf="objective.isActive">
        <mat-icon>power_off</mat-icon>
        <span>{{ 'objective.menu.disable-objective' | translate }}</span>
      </div>
      <div *ngIf="!objective.isActive">
        <mat-icon>power</mat-icon>
        <span>{{ 'objective.menu.enable-objective' | translate }}</span>
      </div>
    </button>
    <button mat-menu-item *ngIf="!isObjectiveOnTop() && userIsOkrMember()" (click)="clickedMoveObjectiveToTop()">
      <mat-icon>vertical_align_top</mat-icon>
      <span>{{ 'objective.menu.move-up-objective' | translate }}</span>
    </button>
    <button mat-menu-item *ngIf="!isObjectiveOnBottom() && userIsOkrMember()" (click)="clickedMoveObjectiveToBottom()">
      <mat-icon>vertical_align_bottom</mat-icon>
      <span>{{ 'objective.menu.move-down-objective' | translate }}</span>
    </button>
    <button mat-menu-item *ngIf="currentUserRole.isAtleastOKRManager() && userIsOkrMember()" (click)="clickedDeleteObjective()">
      <mat-icon>delete</mat-icon>
      <span>{{ 'objective.menu.delete-objective' | translate }}</span>
    </button>
  </ng-template>
</mat-menu>

<!-- Child Menu -->
<mat-menu #childMenu="matMenu" xPosition="before">
  <div mat-menu-item *ngFor="let child of childObjectives" [routerLink]="['/okr/departments/'+child.parentUnitId]">{{child.name}}</div>
</mat-menu>
